<template>
<div id="Evaluation">
    <!--后退-->
    <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
    <div class="toTask" v-show="isShowTask">
        <p><img :src="showData.taskModel.userModel.headPortrait" alt=""></p>
        <p><rate :length="5"  v-model="commData[0].evaluationScore"/></p>
        <p class="tag">
            <el-checkbox-group v-model="tagsGroup">
                <el-checkbox-button v-for="city in tags" :label="city" :key="city">{{city}}</el-checkbox-button>
            </el-checkbox-group>
        </p>
        <input type="text" placeholder="我还想说..." v-model="commData[0].evaluationContent">
    </div>
    <div class="toShop" v-show="isShowShop">
        <p>对商品的评价</p>
        <p><rate :length="5" v-model="commData[1].evaluationScore"/></p>
        <input type="text" placeholder="我还想说..." v-model="commData[1].evaluationContent">
    </div>
    <div class="ConEva"><button @click="confirmSure" class="EvaBtn">提交</button></div>
</div>
</template>
<script>
export default {
  data () {
    return {
        isShowTask:false,
        isShowShop:false,
        commData:[
            {
                bigType: 1,
                byUserId: undefined,
                evaluationContent: undefined,
                evaluationScore: 0,
                orderId: undefined,
                smallType: undefined,
                tagModels: [
                ],
            },
            {
                bigType: undefined,
                byUserId: undefined,
                evaluationContent: undefined,
                evaluationScore: 0,
                myWelfareId: undefined,
                orderId: undefined,
                serverId: undefined,
                smallType: undefined,
                userId: undefined
            }
        ],
        tagsGroup:[],
        stars:2,
        showData:{
            taskModel:{
                 userModel:{
                     nickName:undefined,
                 }
                }
            },
        tags:[],
        tagData:[],
    }
  },
  created(){
      console.log(this.$route.params.id.substring(1, this.$route.params.id.length))
      if(this.$route.params.id.split('')[0]=='f'){
          this.isShowShop = true;
          this.isShowTask = false;
          console.log('ffffffffffffffffffffffffffff')
      }else{
          this.isShowShop = false;
          this.isShowTask = true;
      }
     this.getTag()
     this.getDetailData()
  },
  methods:{
    // 确定评论函数
    confirmSure(){
        if(this.$route.params.id.split('')[0]=='f'){
            this.commData[1].bigType = 3;
            this.commData[1].smallType = 8;
            this.commData[1].myWelfareId = this.$route.params.id.substring(1, this.$route.params.id.length);
            this.commData.splice(0,1);
        }else{
             if(this.showData.taskModel.taskType){
            switch (Number(this.showData.taskModel.taskType)) {
            case 1: 
              this.commData[0].smallType = 2
            case 2: 
              this.commData[0].smallType = 3
            case 3: 
              this.commData[0].smallType = 4
            case 4: 
              this.commData[0].smallType = 5
            case 5: 
              this.commData[0].smallType = 6
            case 6: 
              this.commData[0].smallType = 7
            }
           }
            this.tagsGroup.forEach((item)=>{
                for(var i = 0;i < this.tagData.length; i++) {
                    if(item==this.tagData[i].name){
                        this.commData[0].tagModels.push(this.tagData[i])
                    }
                }
            })
            this.commData.splice(1,1);
        }
        this.$api.addCommit(this.commData).then((res)=>{
                if(res.code=='000000'){
                    this.tagData = res.data;
                    res.data.forEach((item)=>{
                        this.tags.push(item.name)
                    })
                    this.$router.push('/cueMsg')
                }
            })
    },
    //   获取标签
    getTag(){
         this.$api.getCommTag().then((res)=>{
                if(res.code=='000000'){
                    this.tagData = res.data;
                    res.data.forEach((item)=>{
                        this.tags.push(item.name)
                    })
                    
                }
            })
    },
     //  根据id获取详情
        getDetailData(){
            this.$api.getorderCommBI(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    if(res.data.orderType==2){
                        this.isShow = false
                    }
                    console.log('PPPPPPPPPPP')
                    console.log(res.data)
                    this.commData[0].byUserId=res.data.taskModel.userModel.id
                    this.commData[0].orderId = res.data.id
                    // this.commData[1].orderId = res.data.id
                    console.log(res.data.taskModel.taskType)
                    this.showData = res.data
                    console.log('res.data')
                    console.log(res.data)
                }
            })
        },
  }
}

</script>
<style>
#Evaluation .el-checkbox-button{
    border-radius:0.5rem;
}
#Evaluation .el-checkbox-button__inner{
       height:2.5rem;
     width:6rem;
     margin-top:0.3rem;
     margin-left:0.3rem;
     font-size:0.9rem;
     color:#fff!important;
     border-radius:0.5rem;
     background:#33a598;
}
#Evaluation .el-checkbox-button.is-checked .el-checkbox-button__inner{
    background:#8a8a8a;
}
#Evaluation .ConEva{
    width:100%;
    text-align:center;
}
#Evaluation .EvaBtn{
      height:2.5rem;
     width:6rem;
     margin:0 auto;
     margin-top:0.8rem;
     font-size:0.9rem;
     color:#fff!important;
     border-radius:0.5rem;
     background:#33a598;
}
#Evaluation .icon{
    width: 2.5rem;
    height:2.5rem;
}
#Evaluation .Rate__star{
  color: #f4ec2a;
}
#Evaluation .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 1rem 0rem 1rem;
}
#Evaluation .toTask{
    padding:1rem;
    margin:1rem;
    background-color:white;
    box-shadow:0.05rem 0.05rem 0.8rem 0.05rem #e2e2e2;
    border-radius:0.5rem;
}
#Evaluation .toTask > p{
    text-align:center;
}
#Evaluation .toTask > p > img{
    height:5rem;
    width:5rem;
    border-radius:50%;
    
}
#Evaluation .toTask .tag{
    display:flex;
    flex-wrap: wrap;
    margin:auto;
    justify-content: space-around;
    
}

#Evaluation .toTask > input{
    margin-top:0.8rem;
    padding:0.5rem;
    width:100%;
    height:3rem;
    word-break: break-all ;
    font-size:0.8rem;
    border-top:1px solid #8a8a8a;
}
#Evaluation .toShop{
    padding:1rem;
    margin:1rem;
    background-color:white;
    box-shadow:0.05rem 0.05rem 0.8rem 0.05rem #e2e2e2;
    border-radius:0.5rem;
}
#Evaluation .toShop > p {
    color:#8a8a8a;
    font-size:1rem;
}
#Evaluation .toShop > input{
    margin-top:0.8rem;
    padding:0.5rem;
    width:100%;
    height:3rem;
    word-break: break-all ;
    font-size:0.8rem;
    border-top:1px solid #8a8a8a;
}
</style>